<!-- 页签项 -->

<template>
  <div class="flex" :class="{ 'WorkbenchPersonal-LeftWork-active': active }" @click="toClick">
    <div class="flex1 flexCC">
      <img :src="src" />
    </div>

    <div class="flex2 flex flexCol">
      <b>{{ total }}</b>
      <label>{{ name }} (个)</label>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import UTIL from '../../../UTIL'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'TabItem',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 图片路径
     */
    src() {
      return UTIL.getImg(`my-${this.code}`)
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换页签
     */
    toClick() {
      this.$emit('click', this.code)
    },
  },
}
</script>
